<template>
	<div class="upload-content">
		<div class="text-center px16">
			<i class="el-icon-question"></i>
			员工识别码：
			<el-radio-group v-model="importTypes" @change="handleChangeImportTypes">
				<el-radio :label="0">员工手机号</el-radio>
				<el-radio :label="1">员工企业微信帐号</el-radio>
			</el-radio-group>
		</div>

		<div class="upload-file">
			<el-upload
				drag
				auto-upload
				with-credentials
				ref="upload"
				class="upload-pay-slip"
				:data="{ importType }"
				:headers="token !== '' ? { token } : {}"
				:action="`${$BASE_URL}/payroll/upload`"
				:on-success="handleUploadSuccess"
				:on-error="handleUploadError"
				accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
			>
				<br />
				<br />
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">
					将工资表拖拽到此区域
					<br />
					<br />
					<br />
					<el-button type="primary">上传日常工资表</el-button>
				</div>
				<div class="el-upload__tip" slot="tip">上传日常工资表</div>
			</el-upload>
		</div>

		<p class="desc px16">
			1. 建议使用您的日常工资表，支持xlsx,xls,csv格式，支持带公式和二级表头，无需更换工资表。
			<br />
			2. 表格数据必须包括{
			<span class="text-warning">姓名</span>
			}、{
			<span class="text-warning">手机号</span>
			}、{
			<span class="text-warning">实发工资</span>
			}。
			<br />
			3. 如需参考模板
			<a :href="`${$BASE_URL}/payroll/importTemplate?importType=${importType}`">【点击下载】</a>
			<span v-if="importType + '' === '0'">，内含累计扣除公式。</span>
			<span v-else-if="importType + '' === '1'">。</span>
		</p>
	</div>
</template>

<script>
import { log } from 'util'
import { mapGetters, mapState, mapActions } from 'vuex'

export default {
	name: 'PaySlipUpload',
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			active: 1,
			importTypes: 1
		}
	},
	computed: {
		...mapGetters(['token']),
		...mapState(['importType'])
	},
	watch: {
		active(val) {
			this.$emit('step-next', val)
		}
	},
	methods: {
		...mapActions(['handleChangeImportType']),
		handleUploadSuccess(res) {
			const { code, data, msg: message } = res
			if (code === 0) {
				this.$emit('get-slip-data', data)
				this.active = 2
				this.$refs.upload.clearFiles()
			} else {
				this.$refs.upload.clearFiles()
				this.$message({ type: 'error', message })
			}
		},
		handleUploadError(err) {
			this.$message({ type: 'error', message: '上传失败' })
			throw new Error(err)
		},
		handleChangeImportTypes(val) {
			console.log(val);
			this.handleChangeImportType(val)
		}
	}
}
</script>

<style lang="scss" scoped>
.upload-content {
	width: 40vw;
	margin: 20px auto;
	.upload-file {
		width: 22vw;
		margin: 20px auto;
	}
	.desc {
		width: 22vw;
		margin: 20px auto;
		line-height: 30px;
	}
}
</style>

<style lang="scss">
.content {
	.upload-pay-slip {
		text-align: center;
		.el-upload .el-upload-dragger {
			height: 30vh;
			background: #fcfbfd;
		}
	}
}
</style>
